<template>
  <div class="background">
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="line-height: 16px; font-size: 16px; padding: 12px 0"
    >
      <el-breadcrumb-item :to="{ path: '/Home/Index' }" style=""
        ><img
          style="width: 20px; height: 20px; margin-top: -4px"
          src="../assets/images/homepage_24.png"
      /></el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home/Index' }"
        >论坛</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{
        goodType == 0 ? "精品帖子" : "热门帖子"
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="data" stripe style="width: 100%">
      <el-table-column label="标题" width="380">
        <template slot-scope="scope">
          <router-link
            :to="{ path: '/Home/Topic', query: { data: scope.row.tId } }"
            >{{ scope.row.title }}</router-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="用户" width="220">
        <template slot-scope="scope">
          <a href="">{{
            scope.row.realStatus == 0 ? scope.row.nickname : "匿名用户"
          }}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="publishTime"
        width="150"
        align="center"
        label="发布时间"
      >
      </el-table-column>
      <el-table-column prop="likes" label="点赞量" align="center">
      </el-table-column>
      <el-table-column prop="collectionTimes" label="收藏量" align="center">
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="total, prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
      >
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 5, // 页数
      currentPage: 1, // 当前页
      goodType: this.$route.query.goodType,
      tableData: [],
      tempData: [],
    };
  },
  computed: {
    // 计算当前表格中的数据
    data() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    // 获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getGoodTopicList() {
      const _this = this;
      let goodType = this.goodType;
      $.ajax({
        type: "get",
        data: { goodType },
        url: "http://localhost:8080/forum/goodtopic",
        dataType: "json",
        success: function (response) {
          console.log("typelist", response);

          _this.tableData = response;
          _this.tempData = response;
        },
      });
    },
  },
  mounted() {
    this.getGoodTopicList();
  },
};
</script>
    
<style scoped>
.background {
  width: 1004px;
  overflow: auto;
  background-color: #f5f5f5;
  margin: 0 auto;
  min-height: 700px;
}
.smallNav {
  width: 960px;
  height: 24px;
  margin-top: 10px;
  float: left;
  font-size: 14px;
}
a {
  text-decoration: none;
  color: #6699cc;
}
a:hover {
  color: red;
}
.pagination {
  display: flex;
  justify-content: center;
}
</style>